<!DOCTYPE html>
<html>

<head lang='zh'>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
    <title>Luckysheet</title>

    <link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='./plugins/plugins.css' />
    <link rel='stylesheet' href='./css/luckysheet.css' />
    <link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
    <script src="./plugins/js/plugin.js"></script>

    <!-- rollup luckysheet.js -->
    <script src="./luckysheet.umd.js"></script>
    <script src="./demoData/demoFeature.js"></script>
    <!-- 引用测试数据 挂载在window.demoData上 -->
    <script src="./demoData/deep-data.js"></script>
    <!--    <script src="./demoData/demoData.js"></script>-->
</head>

<body>
    <!-- Non-full screen test -->
    <!-- <div style="position: relative;width: 100%;height: 100%;">

		<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:80%;height:500px;left: 20%;top: 200px;bottom:0;right: 0;"></div>
	</div> -->

    <div id="luckysheet" tabindex="0" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;">

    </div>
    <script>
        $(function () {
            // According to the browser language
            var lang = luckysheetDemoUtil.language() === 'zh' ? 'zh' : 'en';
            var isShare = luckysheetDemoUtil.getRequest().share; // '?share=1' opens the collaborative editing mode
            var gridKey = luckysheetDemoUtil.getRequest().gridKey; // workbook id for collaborative editing, or directly define here
            var options = null;
            if (isShare || gridKey) {
                // http://localhost:3000/?gridKey=12eyy789-kk45ofid-23737245
                if (!gridKey) {
                    alert('If gridKey is not provided in the address bar, please add it in the source code')
                }
                options = {
                    container: "luckysheet",
                    lang: lang,
                    allowUpdate: true,
                    updateImageUrl: location.origin + "/luckysheet/api/updateImg",
                    updateUrl: "ws://" + location.host + "/luckysheet/websocket/luckysheet",
                    gridKey: gridKey,
                    sheetsData: initAttechmentData,
                    loadUrl: location.origin + "/luckysheet/api/load",
                    loadSheetUrl: location.origin + "/luckysheet/api/loadsheet"
                }
            } else {
                options = {
                    container: 'luckysheet',
                    lang: lang,
                    row: 10,
                    enableAddRow: true,
                    // pager: {
                    // 	pageIndex: 1,
                    // 	pageSize: 10,
                    // 	total: 50,
                    // 	selectOption: [10, 20]
                    // },
                    autoGenerateOriginData: false,
                    forceCalculation: true,
                    allowEdit: true, //是否允许前台编辑
                    sheetsData: window.demoData,
                    // gridKey: "1079500#-8803#7c45f52b7d01486d88bc53cb17dcd2c3", // 表格唯一标识符
                    // updateUrl: "ws://81.68.69.99/luckysheet/websocket/luckysheet", //表格数据的更新地址
                    updateImageUrl: "", //缩略图的更新地址
                    allowUpdate: false, //是否允许编辑后的后台更
                    showsheetbarConfig: { add: true },
                    protectDatakey: ['tag'],
                    isEdit: true,
                    cellRightClickConfig: {
                        copy: true,
                        paste: true,
                        cut: true,
                        hideRow: true,
                        hideColumn: true,
                        customs: [
                            {
                                title: '数据审计',
                                onClick: ({ rowIndex, columnIndex, data }) => {
                                    console.log(rowIndex, columnIndex, data, 'click')
                                },
                                verify: ({ rowIndex, columnIndex, data }) => {
                                    console.log(rowIndex, columnIndex, data);
                                    return true;
                                },
                                children: [
                                    {
                                        title: '数据审计1',
                                        onClick: ({ rowIndex, columnIndex, data }) => {
                                            console.log(rowIndex, columnIndex, data, 'click')
                                        },
                                        verify: ({ rowIndex, columnIndex, data }) => {
                                            console.log(rowIndex, columnIndex, data);
                                            return false;
                                        },
                                    }, {
                                        title: '数据审计2',
                                        onClick: ({ rowIndex, columnIndex, data }) => {
                                            console.log(rowIndex, columnIndex, data, 'click')
                                        },
                                        verify: ({ rowIndex, columnIndex, data }) => {
                                            console.log(rowIndex, columnIndex, data);
                                            return true;
                                        },
                                    }
                                ]
                            }
                        ]
                    },
                    sheetRightClickConfig: [
                        {
                            txt: '删除工作表',
                            onClick: (sheetIndex, sheetName) => {
                                console.log(sheetIndex, sheetName, 'delete')
                                window.luckysheet.deleteSheet(sheetIndex);
                            }
                        },
                        {
                            txt: '重命名',
                            onClick: (sheetIndex, sheetName) => {
                                console.log(sheetIndex, sheetName, '重命名');
                                window.luckysheet.renameSheet(sheetIndex);
                            }
                        }
                    ],
                    iconList: [{
                        "iconName": "increase",
                        "url": "https://s1.ax1x.com/2022/04/18/LdvK39.png"
                    }, {
                        "iconName": "decrease",
                        "url": "https://s1.ax1x.com/2022/04/18/Ldvu9J.png"
                    }],
                    fontList: [
                        {
                            "fontName": "HanaleiFill",
                            "url": "./assets/iconfont/HanaleiFill-Regular.ttf"
                        },
                        {
                            "fontName": "Anton",
                            "url": "./assets/iconfont/Anton-Regular.ttf"
                        },
                        {
                            "fontName": "Pacifico",
                            "url": "./assets/iconfont/Pacifico-Regular.ttf"
                        }
                    ],
                    hook: {
                        afterFormulaConfirm: function (text) {
                            console.log(text);
                        },
                        onTogglePager: function (data) {
                            // const { page, pageSize } = data;
                            // luckysheet.updateluckysheetfile({ offset: (page - 1) * 100, rowCount: pageSize, url: '/luckysheet/api/load' });
                        },
                        cellDragStop: function (cell, postion, sheetFile, ctx, event) {
                            // console.info(cell, postion, sheetFile, ctx, event);
                        },
                        rowTitleCellRenderBefore: function (rowNum, postion, ctx) {
                            // console.log(rowNum);
                        },
                        rowTitleCellRenderAfter: function (rowNum, postion, ctx) {
                            // console.log(ctx);
                        },
                        columnTitleCellRenderBefore: function (columnAbc, postion, ctx) {
                            // console.log(columnAbc);
                        },
                        columnTitleCellRenderAfter: function (columnAbc, postion, ctx) {
                            // console.log(postion);
                        },
                        cellRenderBefore: function (cell, postion, sheetFile, ctx) {
                            // console.log(cell,postion,sheetFile,ctx);
                        },
                        cellRenderAfter: function (cell, postion, sheetFile, ctx) {
                            // console.log(postion);
                        },
                        cellMousedownBefore: function (cell, postion, sheetFile, ctx) {
                            // console.log(postion);
                        },
                        cellMousedown: function (cell, postion, sheetFile, ctx) {
                            switch (postion.clickIcon) {
                                case 'decrease':
                                    luckysheet.hideRow(5, 7);
                                    luckysheet.setCellValue(4, 0, { icon: 'increase' })
                                    break;
                                case 'increase': default:
                                    break;
                            }
                            // luckysheet.activeArea(postion.r - 1, postion.c - 1, 3, 3)
                        },
                        sheetMousemove: function (cell, postion, sheetFile, moveState, ctx) {
                            // console.log(cell,postion,sheetFile,moveState,ctx);
                        },
                        sheetMouseup: function (cell, postion, sheetFile, moveState, ctx) {
                            // console.log(cell,postion,sheetFile,moveState,ctx);
                        },
                        cellAllRenderBefore: function (data, sheetFile, ctx) {
                            // console.info(data,sheetFile,ctx)
                        },
                        updated: function (operate) {
                            // console.info(operate)
                        },

                        cellUpdateBefore: function (r, c, value, isRefresh) {
                            // console.info('cellUpdateBefore',r,c,value,isRefresh)
                        },
                        cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
                            // console.info('cellUpdated',r,c,oldValue, newValue, isRefresh)
                        },
                        sheetActivate: function (index, isPivotInitial, isNewSheet) {
                            // console.info(index, isPivotInitial, isNewSheet)
                        },
                        rangeSelect: function (index, sheet) {
                            // console.info(index, sheet)
                        },
                        commentInsertBefore: function (r, c) {
                            // console.info(r, c)
                        },
                        commentInsertAfter: function (r, c, cell) {
                            // console.info(r, c, cell)
                        },
                        commentDeleteBefore: function (r, c, cell) {
                            // console.info(r, c, cell)
                        },
                        commentDeleteAfter: function (r, c, cell) {
                            // console.info(r, c, cell)
                        },
                        commentUpdateBefore: function (r, c, value) {
                            // console.info(r, c, value)
                        },
                        commentUpdateAfter: function (r, c, oldCell, newCell) {
                            // console.info(r, c, oldCell, newCell)
                        },
                        cellEditBefore: function (range) {
                            // console.info(range)
                        },
                        // 表格创建后触发
                        workbookCreateAfter: function (json) {
                            console.log('表格创建了')
                            // console.info(json)
                        },
                        // 表格销毁时触发
                        workbookDestroyAfter: function (option) {
                            console.log('表格销毁了')
                        },
                        rangePasteBefore: function (range, data) {
                            // console.info('rangePasteBefore',range,data)
                            // return false; //Can intercept paste
                        },
                        putHighlightArea: function (param) {
                            console.log(param);
                            return true;
                        }

                    },
                }
            }
            options.loading = {
                image: () => {
                    return `<svg viewBox="25 25 50 50" class="circular">
                <circle cx="50" cy="50" r="20" fill="none"></circle>
                </svg>`
                },
                imageClass: "loadingAnimation"
            }
            luckysheet.create(options);
        })
    </script>
    <style>
        /* 自定义loading演示样式 */
        @keyframes loading-rotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes loading-dash {
            0% {
                stroke-dasharray: 1, 200;
                stroke-dashoffset: 0;
            }

            50% {
                stroke-dasharray: 90, 150;
                stroke-dashoffset: -40px;
            }

            100% {
                stroke-dasharray: 90, 150;
                stroke-dashoffset: -120px;
            }
        }

        .loadingAnimation {
            width: 3em;
            height: 3em;
            animation: loading-rotate 2s linear infinite;
        }

        .loadingAnimation circle {
            animation: loading-dash 1.5s ease-in-out infinite;
            stroke-dasharray: 90, 150;
            stroke-dashoffset: 0;
            stroke-width: 2;
            stroke: currentColor;
            stroke-linecap: round;
        }
    </style>
</body>

</html>